<template>
  <div class="add-course">
    <x-header :left-options="{preventGoBack: true}" title="添加课程"
      @on-click-back="showToast = true"><a slot="right"></a>
    </x-header>
    <group title="基本信息">
      <x-input title="老师姓名" text-align="right" v-model="form.teacher" placeholder="请输入老师姓名"></x-input>
      <cell title="性别">
        <input type="radio" id="one" value="男" v-model="form.gender">
        <label for="one" style="margin-right: 15px;">男</label>
        <input type="radio" id="two" value="女" v-model="form.gender">
        <label for="two">女</label>
      </cell>
      <x-input title="所在学院" text-align="right" v-model="form.college" placeholder="请输入学院全名"></x-input>
      <!-- <popup-picker title="所在学院" :data="depList" v-model="form.college" placeholder="请选择学院"></popup-picker> -->
      <x-input title="所教课程" text-align="right" v-model="form.courseName" placeholder="请输入所教课程"></x-input>
    </group>
    <group title="教学打分（必填）">
      <cell v-for="(item,i) in form.pointList" :key="i" :title="item.title">
        <rater active-color="#EFA79B" v-model="item.val" :font-size="24">></rater>
      </cell>
    </group>
    <group title="教师标签（选填）" class="rater-group">
      <checker v-model="form.tags" type="checkbox" default-item-class="my-item" selected-item-class="my-item-selected">
        <checker-item v-for="(item,i) in form.tagsList" :key="i" :value="item.id">{{item.name}}</checker-item>
      </checker>
    </group>
    <group title="添加评论（选填）">
      <x-textarea v-model="form.content" placeholder="请填写评论" :max="800"></x-textarea>
    </group>
    <x-button @click.native="isValid" class="btn" type="primary">确认发布</x-button>
    <x-dialog v-model="showToast" :dialog-style="{'text-align': 'left'}" class="back-tip">
      <div class="tip-content">
        <div class="title">取消发布吗？</div>
        <div class="tip-btn">
          <span class="cancel" @click="showToast=false;$router.replace({path: '/courselist'})">确认取消</span>
          <span class="confirm" @click="showToast=false">继续发布</span>
        </div>
      </div>
    </x-dialog>
    <x-dialog v-model="showPublish" :dialog-style="{'text-align': 'left'}" class="back-tip">
      <div class="tip-content">
        <div class="title">
          您的意见将会给其他同学带来极大的帮助。<br/>
          1. 请勿出现老师个人隐私<br/>
          2.不允许对老师人身攻击
        </div>
        <div class="tip-btn">
          <span class="cancel" @click="showPublish=false;">继续编辑</span>
          <span class="confirm" @click="showPublish=false;doPublish()">确认发布</span>
        </div>
      </div>
    </x-dialog>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import {
  XHeader,
  Checker,
  CheckerItem,
  Group,
  Cell,
  XButton,
  Rater,
  PopupPicker,
  XTextarea,
  XDialog,
  CheckIcon,
  XInput
} from 'vux';
import { setTimeout } from 'timers';

const IndexStore = namespace('publish');
const ListStore = namespace('list');
// const HomeStore = namespace('home');

@Component({
  components: {
    XHeader,
    Checker,
    PopupPicker,
    CheckerItem,
    Group,
    XButton,
    Cell,
    Rater,
    XTextarea,
    XDialog,
    CheckIcon,
    XInput
  }
})
export default class CourseAdd extends Vue {
  @IndexStore.Action getAddCourse
  @ListStore.State pointList
  @ListStore.State tagsList
  // @HomeStore.Action getAllSchools
  // @HomeStore.State schoolArr
  // depList = []
  form = {
    courseName: '',
    teacher: '',
    college: '',
    tags: '',
    content: '',
    gender: '男',
    pointList: [],
    tagsList: []
    // pointList: [
    //   { title: '教得好', val: 0 },
    //   { title: '挂科少', val: 0 },
    //   { title: '给分高', val: 0 },
    //   { title: '点名少', val: 0 },
    //   { title: '作业多', val: 0 }
    // ],
    // tagsList: [
    //   { id: '1', name: '幽默' },
    //   { id: '2', name: '负责' },
    //   { id: '3', name: '厉害' },
    //   { id: '4', name: '严肃' }
    // ]
  }
  showToast = false
  showPublish = false
  created () {
    if (this.pointList.length) {
      this.pointList.forEach(item => {
        item.val = 0
        this.form.pointList.push(item)
      })
    }
    // this.form.pointList = this.pointList
    this.form.tagsList = this.tagsList
    // this.getAllSchools().then(msg => {
    //   if (msg) {
    //   } else {
    //     console.warn('ddd', this.schoolArr)
    //   }
    // })
  }
  isValid () {
    let flag = true
    const { teacher, gender, college, courseName, pointList } = this.form
    // if (!content) {
    //   flag = false
    //   this.$vux.toast.text('请添加评论内容', 'middle');
    // }
    // if (tags.length === 0) {
    //   flag = false
    //   this.$vux.toast.text('请添加标签', 'middle');
    // }
    if (pointList.length > 0) {
      for (let i = 0; i < pointList.length; i++) {
        if (pointList[i].val === 0) {
          flag = false
          this.$vux.toast.text('请完善教学特点评价', 'middle');
          break;
        }
      }
    }
    if (!courseName) {
      flag = false
      this.$vux.toast.text('请输入所教课程', 'middle');
    }
    if (!college) {
      flag = false
      this.$vux.toast.text('请输入所在学院', 'middle');
    }
    if (!gender) {
      flag = false
      this.$vux.toast.text('请选择性别', 'middle');
    }
    if (!teacher) {
      flag = false
      this.$vux.toast.text('请输入老师名称', 'middle');
    }
    if (flag) {
      // this.doPublish()
      this.showPublish = true;
    }
  }
  doPublish () {
    const { courseName, teacher, tags, gender, college, pointList, tagsList, content } = this.form
    const params = {
      title: teacher,
      content: courseName,
      tags,
      courseObj: {
        gender,
        college
      },
      scores: pointList.map(item => item.val),
      tagsList,
      cmt: content
    }
    this.getAddCourse(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('发布成功', 'middle');
        setTimeout(() => {
          this.$router.push({path: '/courselist'})
        }, 1000)
      }
    })
  }
}
</script>
<style lang="less">
  .add-course {
    padding-bottom: 55px;
    padding-top: 46px;
    .rater-group {
      .weui-cell {
        padding-top: 2px!important;
        padding-bottom: 2px!important;
        &:first-child {
          padding-top: 4px!important;
        }
        &:last-child {
          padding-bottom: 4px!important;
        }
      }
      .weui-cells {
        font-size: 17px;
      }
    }
    .btn {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .vux-checker-box {
      padding: 15px;
    }
    .my-item {
      // font-size: 12px;
      width: 70px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: #fff;
      margin-right: 6px;
      margin-bottom: 5px;
    }
    .my-item-selected {
      // background: #ffffff url(../../assets/active.png) no-repeat right bottom;
      border-color: #ff4a00;
    }
  }
  .back-tip {
    text-align: left!important;
    .weui-dialog {
      border-radius: 12px!important;
    }
    .tip-content {
      padding: 20px 24px 15px;
      .title {
        margin-bottom: 10px;
        font-size: 16px;
        color: #333;
      }
      .tip-btn {
        text-align: right;
        span {
          display: inline-block;
          // width: 200px;
          height: 30px;
          line-height: 30px;
          padding: 0 5px;
          font-size: 14px;
          color: #2d8a20;
        }
      }
    }
  }
</style>
